<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>菜单</title>
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/mui.min.css" />
		<link rel="stylesheet" href="css/mui.picker.min.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/lCalendar.css">
		<link rel="stylesheet" type="text/css" href="css/xiaoma.css"/>
		<link rel="stylesheet" type="text/css" href="css/querendingdan.css"/>
		<script>
			var iScale = 1;
			iScale = iScale / window.devicePixelRatio;
			document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">')
		</script>
		<!--动态设置文字大小-->
		<script>
			var iWidth = document.documentElement.clientWidth;
			document.getElementsByTagName('html')[0].style.fontSize = iWidth / 15 + 'px';
		</script>
		<style type="text/css">
			.gaizi{
				position: absolute;
				bottom: 0;
				right: 1.7rem;
				width: 0;
				height: 2.3rem;
				background:white;
			}
			.cai-shu{
				float: right;
				width: 4rem;
				margin-right:0rem;
			}
			.addmenu{
				margin-top:2rem;
				margin-left:33.3%;
				width: 4rem;
				height: 4rem;
			}
			.foodoprate{
				margin-right: 0.4rem;
				font-size:0.4rem;
				display: inline-block;
				float: right;
			}
		</style>
</head>
<body>
	<div id='header'>
   	  <div class="header-yi">
   	  	<a href="javascript:void(0);" onClick="window.history.back(-1);"><img src="img/2452.png" alt="" /></a>
   	  </div>
   	  <div class="header-er">菜单详情</div>
   	  <div class="header-san">
   	  	<a href="RestServlet?opr=index"><img src="img/174527.png" alt="" /></a>
   	  </div>
   </div>
   <div id="section">
   	<c:forEach var="food" items="${requestScope.food }">
	   <div class="caipin">
	   	   	  <img src="img/2745257.png" alt="" />
	   	   	  <div class="cai-xiang">
	   	   	  	<div class="cxiang-tittle">
	   	   	  		<p><label class="foodName">${food.foodName }</label></p>
	   	   	  		<p>月售:300份</p>
	   	   	  		<span>￥<i><label class="price">${food.price }</label></i></span>
	   	   	  	</div>
	   	   	  	<p><label class="description">${food.description }</label></p>
	   	   	  	<h1>米饭250克</h1>
	   	   	  	<div class="cxiang-yang">
	   	   	  		<p>仅剩:<i>16</i>份</p>
	   	   	  		<div class="cai-shu">
	   	   	  			<span><span onclick="oprate(this);" class="oprate">编辑</span><span style='display: none;' onclick="oprque(this);" class="oprque">确定</span>|<span onclick="deletefood(this);" class="deletefood">删除</span></span>
	   	   	  		</div>
	   	   	  	</div>
	   	   	  </div>
	   	   	  <div class="gaizi"></div>
	   	   </div>  <!--//菜品-->
	   	  </c:forEach>
	   	   <img class="addmenu" alt="" src="img/000.png">
   	   </div>
	<script src="js/jquery-1.11.1.js" type="text/javascript"></script>
	<script src="js/mui.min.js" type="text/javascript"></script>
	<script src="js/swiper.js" type="text/javascript"></script>
	<script type="text/javascript">
			function oprate(obj){
				$(obj).css('display','none');
				$(obj).next().css('display','inline');
				$(obj).parentsUntil(".caipin").find("label").each(function(i){
					var classname=this.className;
					var text=$(this).text();
					if(i==0){
						$(this).parent().html("<input style='border-bottom:0.03rem solid #000000;font-size:0.64rem;color: #000000;margin-top:-0.26rem; height:0.7rem;width:3rem;float: left;letter-spacing: 0.04rem;' name='"
						+classname+"' value='"+text+"'/>") 
					}
					if(i==1){
						$(this).parent().html("<input style='border-bottom:0.03rem solid #000000; margin-top:-0.25rem;margin-right: -7.06rem;font-size:0.64rem;color: #FF3333;display: inline-block;float: right;' name='"
						+classname+"' value='"+text+"'/>") 
					}
					if(i==2){
						$(this).parent().html("<input style='border-bottom:0.03rem solid #000000;width:10rem;margin-top: -0.09rem;font-size: 0.4rem;color: #333333;letter-spacing: 0.04rem;' name='"
						+classname+"' value='"+text+"'/>") 
					}
				});
			}
		$(function(){
			$(".addmenu").click(function(){
				var odiv="<div class='caipin'>"
		   	   	  +"<img src='img/2745257.png' alt='' />"
		   	   +"<div class='cai-xiang'>"
		   	+"<div class='cxiang-tittle'>"
		   	+"	<p><label class='foodName'>菜名</label></p>"
		   	+"	<p>月售:300份</p>"
		   	+"		<span>￥<i><label class='price'>0</label></i></span>"
		   	+" 	</div>"
		   	+"  	  	<p><label class='description'>描述</label></p>"
		   	+"   	  	<h1>米饭250克</h1>"
		   	+" 	  	<div class='cxiang-yang'>"
		   	+"  	  		<p>仅剩:<i>16</i>份</p>"
		   	+" 	  		<div class='cai-shu'>"
		   	+" 	  			<span><span onclick='oprate(this);' class='oprate'>编辑</span><span style='display: none;' onclick='oprque(this);' class='oprque'>确定</span>|<span onclick='deletefood(this);' class='deletefood'>删除</span></span>"
		   	+" 	  		</div>"
		   	+"  	  	</div>"
		   	+"  	  </div>"
		   	+"	  <div class='gaizi'></div>"
		   	+"  </div>";	  
		   	   	  
				$(this).before(odiv);
				oprate($(this).prev().last(".caipin").find(".oprate"));
			});
		});
		function oprque(obj){
			var foodName="";
			var price=0;
			var description="";
			var menuID=${requestScope.menuID};
			$(obj).css('display','none');
			$(obj).prev().css('display','inline');
			$(obj).parentsUntil(".caipin").find("input").each(function(i){
				var text=$(this).val();
				if(i==0){
					foodName=text;
					$(this).parent().html("<label class='foodName'>"+text+"</label>"); 
				}
				if(i==1){
					price=text;
					$(this).parent().html("<label class='price'>"+text+"</label>"); 
				}
				if(i==2){
					description=text;
					$(this).parent().html("<label class='description'>"+text+"</label>"); 
				}
			});
			$.ajax({//对餐馆对food项的修改进行异步提交
				url:"AjaxServlet",
				type:"post",
				data:"ajax=updatefood&menuID="+menuID+"&foodName="+foodName+"&price="+price+"&description="+description,
				success:function(data){
				}
			});
		}
		function deletefood(obj){
			var foodName="";
			var price=0;
			var description="";
			if($.contains($(obj).parentsUntil(".caipin"),"input")){
				$(obj).parentsUntil(".caipin").find("input").each(function(i){
					var text=$(this).val();
					if(i==0){
						foodName=text;
					}
					if(i==1){
						price=text;
					}
					if(i==2){
						description=text;
					}
				});
			}else {
				$(obj).parentsUntil(".caipin").find("label").each(function(i){
					var text=$(this).text();
					if(i==0){
						foodName=text;
					}
					if(i==1){
						price=text;
					}
					if(i==2){
						description=text;
					}
				});
			}
			$.ajax({//对餐馆中某一需要删除的food项进行异步删除
				url:"AjaxServlet",
				type:"post",
				data:"ajax=deletefood&foodName="+foodName+"&price="+price+"&description="+description,
				success:function(data){
				}
			});
			$(obj).parentsUntil(".caipin").remove();
		}
	</script>
</body>
</html>